<template>
  <div>
    <van-cell
      v-for="(item, index) in highLightSuggestions"
      :key="index"
      icon="search"
      @click="$emit('update-keywords', suggestions[index])"
    >
      <template #title>
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { debounce } from "lodash";
import { getSearchSuggestionsAPI } from "@/api";
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      suggestions: []
    };
  },
  computed: {
    // map方法
    // -返回值 跟原数组长度一致的新数组
    // 动态正则
    // -  字面量的正则 /a/ 缺点:正则公式写死的
    // -RegExp -->regular expression new RegExp(正则内容字符串,修饰符字符串)
    // 字符串的replace
    // 返回值:替换后的新字符串
    // -replace(字符串,替换的字符串)
    // repalce(正则,替换的字符串)
    // -replace(正则,函数) 函数的返回值作为替换的结果,match函数的参数,返回正则匹配的结果

    highLightSuggestions() {
      const reg = new RegExp(this.keywords, "ig");
      return this.suggestions.map((str) => {
        return str.replace(
          reg,
          (match) => `<span style="color:red">${match}</span>`
        );
      });
    }
  },
  watch: {
    // 监视属性
    // 1.函数式
    // 2.对象的写法
    // 3.字符串的写法(也可以写在hanler)
    //  - 在methods身上去找方法
    // 在创建组件的时候,keywords就已经发生了变化
    keywords: {
      handler: "getSearchSuggestions",
      // 创建组件的时候,直接调用一次
      immediate: true
    }
  },
  methods: {
    // 使用lodash实现防抖
    getSearchSuggestions: debounce(async function () {
      const { data } = await getSearchSuggestionsAPI(this.keywords);
      // console.log(data);
      // 数组里面null全部去掉
      // 版本一
      // this.suggestions = data.data.options.filter((item) => item !== null);
      // 版本二
      // this.suggestions = data.data.options.filter((item) => Boolean(item));
      // 版本三
      this.suggestions = data.data.options.filter(Boolean);
    }, 300)
  }
};
</script>

<style></style>
